<template>
  <div class="bigbox" :style="{width:fullWidth + 'px',height:fullHeight+'px'}">
    <div class="imgbox" :style="{width:fullWidth + 'px'}">
      <div class="box">
        <el-form :model="form" label-width="120px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"  placeholder="请输入用户名" :prefix-icon="User"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" type="password" :prefix-icon="Lock" placeholder="请输入密码" show-password @keydown.enter="userLogin"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-btn" @click="userLogin">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</div>
</template>

<script setup>
  // import { User,Lock } from '@element-plus/icons-vue'
</script>

<script>
import { ElMessage, ElLoading } from 'element-plus'
//导入api
import { signIn } from '@/api/login'

export default {
    name:"PageLogin",
    data(){
      return{
        form:{
          username:"",
          password:""
        },
        fullWidth:document.documentElement.clientWidth,
        fullHeight:document.documentElement.clientHeight
      }
    },
    methods:{
      userLogin(){
        //表单校验
        if(this.form.username.trim() == ""){
          ElMessage.error("用户名不能为空");
          return;
        }
        if(this.form.password.trim() == ""){
          ElMessage.error("密码不能为空");
          return;
        }

        //开始加载
        const loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })

        //封装之后的登录方法
        signIn(this.form).then(
          response =>{
            loading.close()
            if(response.code == 500){//请求错误
              ElMessage.error(response.msg);
            }else if(response.code == 200){
              //登录成功修改全局状态
              this.$store.commit('logIn')
            }
          }
        )

      },
      handleResize(){
        this.fullWidth=document.documentElement.clientWidth;
        this.fullHeight=document.documentElement.clientHeight;
      }
    },
    created(){
      window.addEventListener('resize',this.handleResize)
    },
    beforeUnmount(){
      window.removeEventListener('resize',this.handleResize)
    }
}
</script>

<style scoped>
.bigbox{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.imgbox{
      position: absolute;
      background-image: url('../assets/img/2.webp');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      width: 101%;
      height: 101%;
    }
.box{
    width: 400px;
    height: 180px;
    border-radius: 15px;
    background-color: rgba(106, 152, 221, 0.3);
    position: fixed;
    left: 0px;
    right: 0px;
    top: -200px;
    bottom: 0px;
    margin: auto;
    box-shadow: 6px 6px 15px 3px rgba(124, 179, 251, 0.309);
    padding: 20px;
    padding-top: 50px;
}
.login-btn{
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>